<template>
	<view class="control">
		<view class="box-1">
			 <u-album singleMode="heightFix" :urls="['https://cdn.uviewui.com/uview/album/1.jpg']" keyName="src2"></u-album>
			<view class="cont">
				<view class="flex-between">
					<view class="price">
						￥<text>128.00</text>
					</view>
					<view class="price-2">已售236</view>
				</view>
				<view class="info">哈他防滑瑜伽垫多种色彩加大柔软特价</view>
			</view>
		</view>
		
		<view class="box-2">
			<view class="title">所属场馆</view>
			<view class="flex-between" @click="openStoreShow">
				<view class="name">骏熙泰羽</view>
				<view class="flex-align icon">
					<text>适用两个体育馆</text>
					<u-icon name="arrow-right" color="rgb(153,153,153)" size="14"></u-icon>
				</view>
			</view>
		</view>
		
		<view class="box-2">
			<view class="title">商品详情</view>
		</view>
		
		<view class="footer flex-align">
			<view class="menu">
				<image mode="aspectFit" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/361468498404b1948054a6ad1c3676230fbd9d19.png"></image>
				<text>客服</text>
			</view>
			<view class="btn" @click="openSelectAlert">立即购买</view>
		</view>
		
		<!-- 场馆 -->
		<con-alert :show="alertShow" @close="close">
			<view class="select-list">
				<view class="item flex-align" v-for="item in 10" :key="item">
					<view class="image">
						<u--image radius="5" src="https://cdn.uviewui.com/uview/album/1.jpg" width="100%" height="100%"></u--image>
					</view>
					<view class="detail">
						<view>
							<view class="name">
								骏熙泰羽
							</view>
							<view class="timer">
								营业时间：08:00-09:00
							</view>
						</view>
						
						<view class="flex-between bottom">
							<view class="flex-align" style="width: 70%;">
								<u-icon name="map-fill" color="#cacaca" size="12"></u-icon>
								<text class="address">北京市湖北省hiU盾死ad但是的飒飒大打打</text>
							</view>
							<view class="flex-align">
								<text>12258469971</text>
								<u-icon name="phone" color="#cacaca" size="12"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</con-alert>
		<!-- 选择弹窗 -->
		<con-alert :show="selectAlertShow" @close="close2" is-footer @click="handSubmit">
			<view class="section" >
				<view class="section-1 flex-align">
					<view class="image">
						<image  src="https://cdn.uviewui.com/uview/album/1.jpg"></image>
					</view>
					<view class="detail">
						<view>
							<view class="detail-1">
								成人基础培训课
							</view>
							<view class="detail-2">剩余名额:85</view>
						</view>
						<view class="price">￥<text>30.00</text></view>
					</view>
				</view>
				<view class="section-2" v-for="item in 3" :key="item">
					<view class="sub-title">选择项目</view>
					<view class="tag-list">
						<view class="tag" v-for="item in 8" :key="item">羽毛球</view>
					</view>
				</view>
				<view class="section-3">剩余：8</view>
			</view>
		</con-alert>
	</view>
</template>

<script>
	import conAlert from "@/components/com-alert/com-alert.vue"
	export default {
		data() {
			return {
				alertShow:false,
				selectAlertShow:false,//选择商品
				timeData:{}
			}
		},
		components:{
			conAlert
		},
		methods: {
			handSubmit(){
				uni.navigateTo({
					url:"/page_venues/pages/venuesDetail/ticketModule/makeOther"
				})
			},
			close2(){
				this.selectAlertShow = false
			},
			openSelectAlert(){
				if (uni.getStorageSync("openid") == '') {
					uni.showToast({
						title: '请登录！',
						icon: 'exception',
						duration: 850
					});
					uni.reLaunch({
						url: '/pages/personal/personal'
					})
				} else {
					this.selectAlertShow = true
				}
			},
			close(){
				this.alertShow = false
			},
			openStoreShow(){
				this.alertShow = true
			},
			onChange(e) {
				this.timeData = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	.control{
		width: 100%;
		background-color: #f3f3f3;
		min-height: 100vh;
		padding-bottom: 140rpx;
		.box-1{
			/deep/ image,/deep/ .u-album__row__wrapper{
				width: 100% !important;
			}
			.price{
				font-size: 26rpx;
				color: #FF4105;
				text{
					font-size: 40rpx;
					font-weight: 700;
				}
			}
			.price-2{
				font-size: 22rpx;
				font-weight: bold;
				color: #BEBEBE;
			}
			.info{
				font-size: 26rpx;
				font-weight: bold;
				color: #333333;
				line-height: 16px;
				margin-top: 20rpx;
			}
			.cont{
				background-color: white;
				padding: 30rpx 30rpx;
			}
		}
		
		.box-2{
			margin-top: 20rpx;
			padding: 30rpx 30rpx;
			background-color: rgb(255,255,255);
			.title{
				color: rgb(47,117,250);
				font-size: 28rpx;
				font-weight: 700;
				margin-bottom: 40rpx;
			}
			.name{
				color: rgb(51,51,51);
				font-size: 28rpx;
				font-weight: 700;
			}
			.icon{
				color: rgb(153,153,153);
				font-size: 28rpx;
				text{
					margin-right: 10rpx;
				}
			}
		}
		
		.footer{
			position: fixed;
			width: 100%;
			background-color: white;
			bottom: 0;
			left: 0;
			padding: 20rpx 25rpx 20rpx 25rpx;
			box-sizing: border-box;
			.menu{
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 40rpx;
				image{
					width: 35rpx;
					height: 35rpx;
				}
				text{
					color: rgb(51,51,51);
					font-size: 24rpx;
					font-weight: 700;
					margin-top: 13rpx;
				}
			}
			.btn{
				flex: 1;
				color: rgb(255,255,255);
				font-size: 30rpx;
				padding: 26rpx 0;
				border-radius: 60rpx;
				background-color: #3e80fc;
				text-align: center;
				font-weight: 700;
			}
		}
		
		// 弹窗
	
		.select-list{
			.item{
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;
				height: 150rpx;
				border-bottom: 1px solid #cccccc;
				&:last-of-type{
					border: none;
					margin: 0;
					padding: 0;
				}
				.image{
					width: 150rpx;
					height: 100%;
					/deep/ .vue-ref {
						width: 100%;
						height: 100%;
					}
				}
				.detail{
					display: flex;
					height: 100%;
					flex: 1;
					width: 0;
					margin-left: 20rpx;
					flex-direction: column;
					justify-content: space-between;
					.name{
						font-weight: 700;
						font-size: 28rpx;
						margin-bottom: 15rpx;
					}
					.timer{
						color: #cacaca;
						font-size: 20rpx;
					}
					.bottom{
						font-size: 20rpx;
						color: #cacaca;
						.address{
							width: 70%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}

	
		.section{
			.section-1{
				
				height: 200rpx;
				.image{
					width: 200rpx;
					height: 100%;
					margin-right: 26rpx;
					border-radius: 10rpx;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.detail{
					flex: 1;
					width: 0;
					display: flex;
					height: 100%;
					flex-direction: column;
					justify-content: space-between;
					.detail-1{
						font-size: 27rpx;
						font-weight: 500;
						color: #333333;
					}
					.detail-2{
						font-size: 24rpx;
						font-weight: 500;
						color: #888888;
						margin-top: 12rpx;
					}
					.price{
						font-size: 20rpx;
						font-weight: 500;
						color: #FF0000;
						text{
							font-size: 32rpx;
							font-weight: 700;
						}
					}
				}
			}
			.section-2{
				margin-top: 50rpx;
				.sub-title{
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 20rpx;
				}
				.tag-list{
					display: flex;
					flex-wrap: wrap;
					.tag{
						background: #EFEFEF;
						border-radius: 3px;
						font-size: 24rpx;
						font-weight: 500;
						color: #FFFFFF;
						padding: 7rpx 20rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
					}
				}
			}
			.section-3{
				font-size: 22rpx;
				font-weight: 500;
				color: #333333;
			}
		}
	}
</style>
